<template>
  <!--批量管理设备-->
  <div>
    <details-tab :tabsArr="tabsArr" ref="tab">
      <template slot="pcTable">
        <el-row style="padding:20px 0">
          <el-button @click="hangleFacility(0,0)" size="small">一键启用设备</el-button>
          <el-button @click="hangleFacility(0,1)" size="small">一键禁用设备</el-button>
          <el-button @click="hangleLock(0,1)" size="small">一键启用设备锁</el-button>
          <el-button @click="hangleLock(0,0)" size="small">一键停用设备锁</el-button>
          <el-button @click="resetfacility(0)" size="small">一键重置设备</el-button>
        </el-row>
        <el-row style="padding:10px;min-height:300px">
          <el-table :data="PC.data" :max-height="270" ref="pctable" @selection-change="PCHandleSelectionChange">
            <el-table-column type="selection" align="center" width="40">
            </el-table-column>
            <el-table-column prop="userName" label="用户名" align="center" min-width="65">
            </el-table-column>
            <el-table-column prop="type" label="类型" align="center" min-width="65">
              <template scope="scope">
                <span v-if="scope.row.type == 0">PC端</span>
                <span v-if="scope.row.type == 1">移动端</span>
              </template>
            </el-table-column>
            <el-table-column prop="flag" label="是否禁用" align="center" min-width="65">
              <template scope="scope">
                <span v-if="scope.row.flag == 0">否</span>
                <span v-if="scope.row.flag == 1">是</span>
              </template>
            </el-table-column>
            <el-table-column prop="validate" label="设备锁状态" align="center" min-width="65">
              <template scope="scope">
                <span v-if="scope.row.validate == 0">停用</span>
                <span v-if="scope.row.validate == 1">启用</span>
              </template>
            </el-table-column>
          </el-table>
        </el-row>
      </template>
      <template slot="movingTable">
        <el-row style="padding:20px 0">
          <el-button @click="hangleFacility(1,0)" size="small">一键启用设备</el-button>
          <el-button @click="hangleFacility(1,1)" size="small">一键禁用设备</el-button>
          <el-button @click="hangleLock(1,1)" size="small">一键启用设备锁</el-button>
          <el-button @click="hangleLock(1,0)" size="small">一键停用设备锁</el-button>
          <el-button @click="resetfacility(1)" size="small">一键重置设备</el-button>
        </el-row>
        <el-row style="padding:10px;min-height:300px">
          <el-table :data="moving.data" :max-height="270" ref="movingtable" @selection-change="movingHandleSelectionChange">
            <el-table-column type="selection" align="center" width="40">
            </el-table-column>
            <el-table-column prop="userName" label="用户名" align="center" min-width="65">
            </el-table-column>
            <el-table-column prop="type" label="类型" align="center" min-width="65">
              <template scope="scope">
                <span v-if="scope.row.type == 0">PC端</span>
                <span v-if="scope.row.type == 1">移动端</span>
              </template>
            </el-table-column>
            <el-table-column prop="flag" label="是否禁用" align="center" min-width="65">
              <template scope="scope">
                <span v-if="scope.row.flag == 0">否</span>
                <span v-if="scope.row.flag == 1">是</span>
              </template>
            </el-table-column>
            <el-table-column prop="validate" label="设备锁状态" align="center" min-width="65">
              <template scope="scope">
                <span v-if="scope.row.validate == 0">停用</span>
                <span v-if="scope.row.validate == 1">启用</span>
              </template>
            </el-table-column>
          </el-table>
        </el-row>
      </template>
    </details-tab>
  </div>
</template>
<script>
  import server from '@/config/servers'
  import net from '@/util/net'
  import DetailsTab from '@/components/DetailsTab'

  export default {
    name: 'batch-facility',
    data() {
      return {
        servers: {
          handleFacility: server.SystemManage.handle_facility, // 是否禁用设备
          handleLock: server.SystemManage.handle_lock, // 启用停用设备锁
          resetLock: server.SystemManage.reset_lock // 重置设备
        },
        tabsArr: [{
          title: 'PC端',
          pane: 'pcTable'
        }, {
          title: '移动端',
          pane: 'movingTable'
        }],
        objList: [],
        moving: {
          data: [],
          selected: []
        },
        PC: {
          data: [],
          selected: []
        }
      }
    },
    methods: {
      /**
       * 移动端选择变化
       */
      movingHandleSelectionChange(val) {
        this.moving.selected = val
      },
      /**
       * PC选择变化
       */
      PCHandleSelectionChange(val) {
        this.PC.selected = val
      },
      /**
       * 启用禁用设备
       */
      hangleFacility(type, handle) {
        this.$confirm(`您确定要执行该操作吗？`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let userIds = []
          if (type === 0) {
            userIds = this.PC.selected
          } else {
            userIds = this.moving.selected
          }
          net.send({
            server: this.servers.handleFacility,
            data: {
              userIds: userIds.map(v => v.userId),
              usdeType: type,
              usdeFlag: handle
            }
          }).then(() => {
            userIds.forEach((v) => {
              if (v.type === type) {
                v.flag = handle
              }
            })
            // 更新数据信息
            this.$message({
              type: 'success',
              message: '操作成功!'
            })
          }, err => {
            this.$message({
              type: 'info',
              message: err.reason
            })
          })
        })
      },
      /**
       * 启用停用设备锁
       */
      hangleLock(type, handle) {
        this.$confirm(`您确定要执行该操作吗？`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let userIds = []
          if (type === 0) {
            userIds = this.PC.selected
          } else {
            userIds = this.moving.selected
          }
          net.send({
            server: this.servers.handleLock,
            data: {
              userIds: userIds.map(v => v.userId),
              usdeType: type,
              validate: handle
            }
          }).then(() => {
            userIds.forEach((v) => {
              if (v.type === type) {
                v.validate = handle
              }
            })
            // 更新数据信息
            this.$message({
              type: 'success',
              message: '操作成功!'
            })
          }, err => {
            this.$message({
              type: 'info',
              message: err.reason
            })
          })
        })
      },
      /**
       * 重置设备
       */
      resetfacility(type) {
        this.$confirm(`您确定要执行该操作吗？`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let userIds = []
          if (type === 0) {
            userIds = this.PC.selected
          } else {
            userIds = this.moving.selected
          }
          net.send({
            server: this.servers.resetLock,
            data: {
              userIds: userIds.map(v => v.userId),
              usdeType: type
            }
          }).then(() => {
            // 更新数据信息
            userIds.forEach((v) => {
              if (v.type === type) {
                v.code = ''
              }
            })
            this.$emit('resetSuccess')
            this.$message({
              type: 'success',
              message: '操作成功!'
            })
          }, err => {
            this.$message({
              type: 'info',
              message: err.reason
            })
          })
        })
      },
      /**
       * 刷新
       */
      refresh(obj) {
        this.objList = obj
        let arrAll = []
        this.objList.map((v) => {
          let arr = v.userDevices.map((val) => {
            val.userName = v.userName
            val.userId = v.userId
            return val
          })
          arrAll = arrAll.concat(arr)
        })
        this.moving.data = arrAll.filter(v => v.type === 1)
        this.PC.data = arrAll.filter(v => v.type === 0)
        this.$nextTick(() => {
          for (let item of this.moving.data) {
            this.$refs['movingtable'].toggleRowSelection(item)
          }
          for (let item of this.PC.data) {
            this.$refs['pctable'].toggleRowSelection(item)
          }
        })
      }
    },
    components: {
      DetailsTab
    },
    mounted() {}
  }

</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .tableTitle {
    line-height: 40px;
    color: rgb(31, 45, 61);
  }

</style>
